<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <title>添加用户</title>
</head>
<body>
<center>
    <br><br>
    添加用户:<br><br>
    姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
    email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
    电话: <input type="text" name="tel" id="tel" /><br><br>
    <button id="addUser">提交</button>
    <br><br>
    <hr>
    <br><br>
    <table id="usertable" border="1" cellpadding="5" cellspacing=0>
        <tbody>
        <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        </tbody>
    </table>
</center>
</body>
<script type="text/javascript">
    $().ready(function () {
        $("#addUser").click(function () {
            var $name = $("#name").val();
            var $email = $("#email").val();
            var $tel = $("#tel").val();

            var $tr = $("<tr></tr>");

            var $td1 = $("<td></td>").text($name);
            var $td2 = $("<td></td>").text($email);
            var $td3 = $("<td></td>").text($tel);
            var $td4 = $("<td></td>");
             var $a = $("<td></td>").text("Delete");
            $a.appendTo($td4);
            $a.click(function () {
                $(this).parent().parent().empty();

            });
            //挂接
            $tr.append($td1);
            $tr.append($td2);
            $tr.append($td3);
            $tr.append($td4)
            $tr.appendTo("#usertable tbody");
             });
    });
    
</script>
</html>